<script setup>
import * as echarts from "echarts"
import {onMounted,ref} from "vue";
const affect=ref()
onMounted(()=>{
  let myChart = echarts.init(affect.value, 'dark', {
    renderer: 'canvas',
    useDirtyRect: false
  });
  let app = {};

  let option;

  option = {
    // backgroundColor: "#19b5fe",
    tooltip:{
      trigger:"item",
      formatter: '{b}：{d}%', //标签与百分比
    },
    title:{
      left: 'center',
      text: '赤潮影响因素比例',
      textStyle: {
        fontSize:14//加
        //color:white",
      },
    },
    grid: {
      //top:'50%',
      //left: '0%',/*3*/
      //right: '30%',/*4*/
      bottom: '2%',/*3*/
      containLabel: true
    },

    legend: {
      //top: 'left',
      left:'0',
      top:'6%',
      orient: "vertical",//设置显示顺序，默认水平（水平，竖直）
    },
    toolbox: {
      show: false,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: ['20%', '52%'],
        center: ['62%', '53%'],
        roseType: 'area',
//      itemStyle: {
//        borderRadius: 8
//      },

        data: [
          { value: 40, name: '海洋温度' },
          { value: 38, name: '浮游生物数量' },
          { value: 32, name: '海洋污染' },
          { value: 30, name: '洋流' },
          { value: 28, name: '海场养殖' },
          { value: 26, name: '海域封闭程度' },
          { value: 18, name: '其他影响因素' }
        ],
        label: {
          normal: {
            show: true,
            //position: 'inner', // 数值显示在内部
            formatter: '{d}%', // 格式化数值百分比输出
          },
        },
      }
    ]
  };

  if (option && typeof option === 'object') {
    myChart.setOption(option);
  }

  window.addEventListener('resize', myChart.resize);
})

</script>

<template>
  <div class="content-right1" ref="affect"></div>
</template>

<style scoped>
.content-right1{
  /*height:600px;*/
  //border:1px solid red;
  flex-grow:1;
}

@media screen and (max-width:2000px){
    .content-right1{
    /*position:absolute;*/
    height:34%;
    /*border:1px solid black;*/
}
}

</style>
<!--2024/2/2 13:14-->